<template>
    <div class="mainSty">
        <div class="min_tit_sty flex_ard">
            <div class="main_tab_sty">
                <div>0</div>
                <div>上传总数</div>
            </div>
            <div style="color: #f0f0f0;">|</div>
            <div class="main_tab_sty">
                <div>0.00</div>
                <div>收益(元)</div>
            </div>
            <div style="color: #f0f0f0;">|</div>
            <div class="main_tab_sty">
                <div>0</div>
                <div>浏览次数</div>
            </div>
            <div style="color: #f0f0f0;">|</div>
            <div class="main_tab_sty">
                <div>0</div>
                <div>被下载次数</div>
            </div>
        </div>
        <div class="main_con_sty">
            <div class="con_tit flex_str">
                <div>定位: </div>
                <div class="cascSty">
                    <el-cascader v-model="city" :options="cityData" :props="props" @change="handleChange"
                        placeholder="定位" />
                </div>
                <div>小区名: </div>
                <el-input style="width:180px;margin-right: 30px;"></el-input>
                <div>备案名: </div>
                <el-input style="width:180px;"></el-input>
            </div>

            <div class="con_tit flex_str">
                <div>建筑面积: </div>
                <el-input style="width:180px;"></el-input>
                <div>楼栋号: </div>
                <el-input style="width:180px;"></el-input>
            </div>

            <div class="con_tab_sty ">
                <!-- <div class="flex_str">
                    <div v-for="(item, index) in conTabList" :key="index" @click="conTabClick(item.id)"
                        class="con_tab_item_sty"
                        :style="conTabId == item.id ? 'color: #E21C20;border-bottom: 2px solid #E21C20;' : 'border-bottom: 2px solid #fff;'">
                        {{ item.name }}
                    </div>
                </div> -->
                <div class="flex_str" style="margin-top: 12px;">
                    <div v-for="(item, index) in statusList" :key="index" @click="statusTabClick(item.id)"
                        class="con_tab_item_sty"
                        :style="statusVal == item.id ? 'color: #E21C20;border-bottom: 2px solid #E21C20;' : 'border-bottom: 2px solid #fff;'">
                        {{ item.name }}
                    </div>

                    <el-config-provider :locale="locale">
                        <el-date-picker v-model="pickTime" type="daterange" range-separator="--"
                            start-placeholder="开始时间" end-placeholder="结束时间" @change="dataPicker" />
                    </el-config-provider>
                </div>
            </div>
            <div class="uploadBox ">
                <div class="uploadItem flex_str" v-for="(item, index) in myUpdateData" :key="index">
                    <img src="@/assets/img/an1.png" alt="">
                    <div class="item_txt_sty">
                        <div class="item_name_sty">{{ item.communityName }} <span>{{ item.buildingNo }}</span></div>
                        <div>{{ item.position }}</div>
                        <div>原始框架cad：</div>
                        <div>平面方案cad：</div>
                        <div>效果图：</div>
                        <div class="flex_btn statusSty">
                            <div>效果照片：</div>
                            <div>{{ statusCom(item.status) }}</div>
                        </div>
                    </div>
                </div>
                <div class="flex_cen" style="margin-top: 50px;">
                    <el-pagination small background layout="prev, pager, next" :total="total" class="mt-4"
                        style="width: 40%;margin-left: 30%;" />
                </div>
            </div>

        </div>
    </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, computed } from 'vue'
import cityData from '@/utils/city.json'
// @ts-ignore
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import { formatDayTime } from '@/utils/moment'
const city = ref<string>('定位')
const props = {
    expandTrigger: 'hover',
    label: 'name',
    value: 'code'
}
const statusVal = ref(null)
const statusList = ref([{
    id: null,
    name: '全部'
}, {
    id: 2,
    name: '已通过'
}, {
    id: 0,
    name: '待审核'
}, {
    id: 3,
    name: '未通过'
}, {
    id: 4,
    name: '已下架'
}])
const myUpdateData = ref<any>([])
const total = ref(0)
// 时间段
const pickTime = ref('')
const startTime = ref('')
const endTime = ref('')
const locale = zhCn
const handleChange = (e: any) => {
    city.value = e
}
const statusTabClick = (id: any) => {
    statusVal.value = id
    getMyUpdateFUn()
}

const getMyUpdateFUn = () => {
}
const dataPicker = (e: any) => {
    startTime.value = formatDayTime(e[0])
    endTime.value = formatDayTime(e[1])
    getMyUpdateFUn()
}
const getMyStatistics = () => {
}

onMounted(() => {
    getMyStatistics()
    getMyUpdateFUn()
})
const statusCom = computed(() => {
    // value是计算属性执行后，再次执行return里面的函数时传的参数
    return (value: any) => {
        if (value == 0) {
            return '待审核'
        } else if (value == 2) {
            return '已通过'
        } else if (value == 3) {
            return '未通过'
        } else if (value == 4) {
            return '已下架'
        }
    }
})
</script>
<style scoped>
.uploadBox {
    margin-top: 30px;
}

.uploadItem {
    margin: 10px 0;
}

.item_name_sty {
    font-size: 22px;
    margin-bottom: 14px;
}

.statusSty {
    width: 500px;
}

.item_txt_sty {
    margin-left: 22px;
    margin-right: 30px;
    font-size: 18px;

}

.saveBtnSty {
    padding: 10px 30px;
    background-color: #E21C20;
    font-size: 18px;
    border-radius: 6px;
    color: #fff;
    margin-left: 140px !important;
}

.con_tab_sty {
    border: 8px solid #f0f0f0;
    padding: 8px 0;
}

.con_tab_item_sty {
    margin: 0 20px;
}

.con_tit {
    width: 100%;
}

.con_tit el-input {
    width: 360px;
}

.con_tit div {
    margin-bottom: 20px;
    margin-right: 20px;
}

.cascSty {
    width: 240px;
}

.main_tab_sty {
    text-align: center;
    font-size: 18px;
    color: #A19EA8;
}

.main_tab_sty :first-child {
    color: #000;
    margin-bottom: 4px;
}

.mainSty {
    width: 80%;
    min-height: 500px;
}

.min_tit_sty {
    width: 100%;
    min-height: 120px;
    background-color: #fff;
    margin-bottom: 40px;
}

.main_con_sty {
    width: 100%;
    min-height: 500px;
    background-color: #fff;
    padding: 30px 20px;
    margin-bottom: 40px;
}
</style>